<template>
  <TForm v-model="formData" :columns="formColumns" @onFinish="onSubmit" @onReset="onReset" :formProps="formProps"></TForm>
</template>

<script lang="ts" setup>
import { TForm, TFormColumns, TFormProp } from '@twa/components'
import { ref } from 'vue'

const formData:any = ref({})

const formProps = ref<TFormProp>({
  labelWidth: '128px'
})
function onReset(){
  console.log('onReset', formData.value)
}
function onSubmit(){
  console.log('onSubmit', formData.value)
}
const formColumns = ref<TFormColumns[]>([
  { 
    label: '输入框', 
    prop: 'test1',
    valueType: 'input',
    defaultValue: '默认值'
  },
  { 
    label: '输入文本域', 
    prop: 'test1.1',
    valueType: 'input',
    fieldProps: {
      type: "textarea"
    }
  },
  { 
    label: '数字输入框', 
    prop: 'test2',
    valueType: 'inputNumber'
  },
  { 
    label: '切换按钮', 
    prop: 'test3',
    valueType: 'switch'
  },
  { 
    label: '下拉框', 
    prop: 'test4',
    valueType: 'select',
    valueEnum: [
      { label: '选项1', value: '1' },
      { label: '选项2', value: '2' },
      { label: '选项3', value: '3' },
    ]
  },
  { 
    label: '下拉框多选', 
    prop: 'test5',
    valueType: 'select',
    fieldProps: {
      multiple: true
    },
    valueEnum: [
      { label: '选项1', value: '1' },
      { label: '选项2', value: '2' },
      { label: '选项3', value: '3' },
    ]
  },
  { 
    label: '多选框', 
    prop: 'test6',
    valueType: 'checkboxGroup',
    valueEnum: [
      { label: '选项1', value: '1' },
      { label: '选项2', value: '2' },
      { label: '选项3', value: '3' },
    ]
  },
  { 
    label: '单选框', 
    prop: 'test7',
    valueType: 'radio',
    valueEnum: [
      { label: '选项1', value: '1' },
      { label: '选项2', value: '2' },
      { label: '选项3', value: '3' },
    ]
  },
  { 
    label: '时间选择', 
    prop: 'test8',
    valueType: 'time',
  },
  { 
    label: '时间范围选择', 
    prop: 'test9',
    paramsRange: ['test9start', 'test9end'],
    valueType: 'timeRange',
  },
  { 
    label: '日期选择', 
    prop: 'test10',
    valueType: 'date',
  },
  { 
    label: '日期范围选择',
    prop: 'test11',
    valueType: 'dateRange',
  },
  { 
    label: '日期时间选择',
    prop: 'test12',
    valueType: 'dateTime',
  },
  { 
    label: '日期时间范围选择',
    prop: 'test13',
    paramsRange: ['test13start', 'test13end'],
    valueType: 'dateTimeRange',
  },
  { 
    label: '级联选择器',
    prop: 'test14',
    valueType: 'cascader',
    fieldProps: {
      options: [
        {
          value: 'zhinan',
          label: '指南',
          children: [
            {
              value: 'shejiyuanze',
              label: '设计原则',
            }
          ]
        },
        {
          value: 'guifan',
          label: '规范',
          children: [
            {
              value: 'shejiguifan',
              label: '设计规范',
            }
          ]
        },
      ]
    }
  },
])
</script>